<script lang="ts" setup>
import {reactive, onMounted, ref} from "vue";
import PageContainer from "@/core/components/PageContainer.vue";
import {VxeTablePropTypes} from 'vxe-table'

defineOptions({name: "VxeTableCom"});

interface RowVO {
  id: number
  name: string
  role: string
  sex: string
  age: number
  address: string
}

const allAlign = ref<VxeTablePropTypes.Align>(null)

const tableData = ref<RowVO[]>([
  {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc'},
  {id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
  {id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
  {id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai'}
])

onMounted(() => {
  // demo1.loading = true;
  // setTimeout(() => {
  //   demo1.tableData = [
  //     { id: 10001, name: "Test1", role: "Develop", sex: "0", age: 28, address: "test abc" },
  //     { id: 10002, name: "Test2", role: "Test", sex: "1", age: 22, address: "Guangzhou" },
  //     { id: 10003, name: "Test3", role: "PM", sex: "0", age: 32, address: "Shanghai" },
  //     { id: 10004, name: "Test4", role: "Designer", sex: "1", age: 23, address: "test abc" },
  //     { id: 10005, name: "Test5", role: "Develop", sex: "1", age: 30, address: "Shanghai" },
  //     { id: 10006, name: "Test6", role: "Designer", sex: "1", age: 21, address: "test abc" },
  //     { id: 10007, name: "Test7", role: "Test", sex: "0", age: 29, address: "test abc" },
  //     { id: 10008, name: "Test8", role: "Develop", sex: "0", age: 35, address: "test abc" },
  //     { id: 10009, name: "Test9", role: "Test", sex: "1", age: 21, address: "test abc" },
  //     { id: 10010, name: "Test10", role: "Develop", sex: "0", age: 28, address: "test abc" },
  //     { id: 10011, name: "Test11", role: "Test", sex: "0", age: 29, address: "test abc" },
  //     { id: 10012, name: "Test12", role: "Develop", sex: "1", age: 27, address: "test abc" },
  //     { id: 10013, name: "Test13", role: "Test", sex: "0", age: 24, address: "test abc" },
  //     { id: 10014, name: "Test14", role: "Develop", sex: "1", age: 34, address: "test abc" },
  //     { id: 10015, name: "Test15", role: "Test", sex: "1", age: 21, address: "test abc" },
  //     { id: 10016, name: "Test16", role: "Develop", sex: "0", age: 20, address: "test abc" },
  //     { id: 10017, name: "Test17", role: "Test", sex: "1", age: 31, address: "test abc" },
  //     { id: 10018, name: "Test18", role: "Develop", sex: "0", age: 32, address: "test abc" },
  //     { id: 10019, name: "Test19", role: "Test", sex: "1", age: 37, address: "test abc" },
  //     { id: 10020, name: "Test20", role: "Develop", sex: "1", age: 41, address: "test abc" },
  //   ];
  //   demo1.loading = false;
  // }, 200);
});
</script>

<template>
  <PageContainer>
    <el-card title="VxeTable 演示">
      <template #extra><a href="https://xuliangzhan_admin.gitee.io/vxe-table/v4/table/start/install" target="_black">VxeTable
        官网文档</a></template>
      <vxe-table
          :align="allAlign"
          :data="tableData">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="age" title="Age"></vxe-column>
      </vxe-table>
    </el-card>
  </PageContainer>
</template>
